<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第三方集成示例 - 无人机视频播放</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .demo-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        
        .video-embed {
            width: 100%;
            height: 500px;
            border: none;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .code-block {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            overflow-x: auto;
        }
        
        .controls {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .input-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        input[type="text"] {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 200px;
        }
        
        button {
            padding: 8px 16px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        button:hover {
            background: #0056b3;
        }
        
        .info {
            background: #d1ecf1;
            color: #0c5460;
            padding: 15px;
            border-radius: 4px;
            margin: 15px 0;
        }
        
        .warning {
            background: #fff3cd;
            color: #856404;
            padding: 15px;
            border-radius: 4px;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>第三方无人机视频播放器集成示例</h1>
        
        <div class="demo-section">
            <h2>🎥 实时演示</h2>
            <div class="controls">
                <div class="input-group">
                    <label>设备ID:</label>
                    <input type="text" id="droneIdInput" value="DJI001" placeholder="输入无人机设备ID">
                </div>
                <button onclick="updateEmbed()">更新播放器</button>
                <button onclick="refreshEmbed()">刷新播放器</button>
            </div>
            
            <iframe 
                id="videoEmbed"
                class="video-embed" 
                src="http://localhost:8002/embed?droneId=DJI001"
                allow="autoplay; fullscreen">
            </iframe>
        </div>
        
        <div class="demo-section">
            <h2>📋 集成代码示例</h2>
            
            <h3>1. 基础嵌入代码</h3>
            <div class="code-block">
&lt;!-- 基础iframe嵌入 --&gt;
&lt;iframe 
    src="http://localhost:8002/embed?droneId=DJI001"
    width="800" 
    height="600"
    frameborder="0"
    allow="autoplay; fullscreen"&gt;
&lt;/iframe&gt;
            </div>
            
            <h3>2. 响应式嵌入代码</h3>
            <div class="code-block">
&lt;!-- 响应式iframe嵌入 --&gt;
&lt;div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;"&gt;
    &lt;iframe 
        src="http://localhost:8002/embed?droneId=DJI001"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
        frameborder="0"
        allow="autoplay; fullscreen"&gt;
    &lt;/iframe&gt;
&lt;/div&gt;
            </div>
            
            <h3>3. JavaScript动态加载</h3>
            <div class="code-block">
&lt;script&gt;
function createDronePlayer(droneId, containerId) {
    const container = document.getElementById(containerId);
    const iframe = document.createElement('iframe');
    iframe.src = `http://localhost:8002/embed?droneId=${droneId}`;
    iframe.width = '100%';
    iframe.height = '500px';
    iframe.frameBorder = '0';
    iframe.allow = 'autoplay; fullscreen';
    container.appendChild(iframe);
}

// 使用示例
createDronePlayer('DJI001', 'video-container');
&lt;/script&gt;
            </div>
            
            <h3>4. React组件示例</h3>
            <div class="code-block">
import React from 'react';

const DronePlayer = ({ droneId, width = '100%', height = '500px' }) =&gt; {
    const embedUrl = `http://localhost:8002/embed?droneId=${droneId}`;
    
    return (
        &lt;iframe
            src={embedUrl}
            width={width}
            height={height}
            frameBorder="0"
            allow="autoplay; fullscreen"
            title={`无人机视频播放器 - ${droneId}`}
        /&gt;
    );
};

// 使用示例
&lt;DronePlayer droneId="DJI001" /&gt;
            </div>
        </div>
        
        <div class="demo-section">
            <h2>⚙️ 参数说明</h2>
            
            <table style="width: 100%; border-collapse: collapse;">
                <thead>
                    <tr style="background: #f8f9fa;">
                        <th style="padding: 12px; text-align: left; border: 1px solid #dee2e6;">参数名</th>
                        <th style="padding: 12px; text-align: left; border: 1px solid #dee2e6;">类型</th>
                        <th style="padding: 12px; text-align: left; border: 1px solid #dee2e6;">必需</th>
                        <th style="padding: 12px; text-align: left; border: 1px solid #dee2e6;">说明</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="padding: 12px; border: 1px solid #dee2e6;"><code>droneId</code></td>
                        <td style="padding: 12px; border: 1px solid #dee2e6;">String</td>
                        <td style="padding: 12px; border: 1px solid #dee2e6;">是</td>
                        <td style="padding: 12px; border: 1px solid #dee2e6;">无人机设备唯一标识ID</td>
                    </tr>
                    <tr>
                        <td style="padding: 12px; border: 1px solid #dee2e6;"><code>id</code></td>
                        <td style="padding: 12px; border: 1px solid #dee2e6;">String</td>
                        <td style="padding: 12px; border: 1px solid #dee2e6;">否</td>
                        <td style="padding: 12px; border: 1px solid #dee2e6;">droneId的别名，可以使用id代替droneId</td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <div class="demo-section">
            <div class="info">
                <strong>✅ 功能特点:</strong>
                <ul>
                    <li>支持HTTP-FLV和HLS两种播放协议，可动态切换</li>
                    <li>自动适配移动端和PC端</li>
                    <li>支持全屏播放</li>
                    <li>无跨域限制，可嵌入任意网站</li>
                    <li>自动重连和错误处理</li>
                    <li>响应式设计，支持各种屏幕尺寸</li>
                </ul>
            </div>
            
            <div class="warning">
                <strong>⚠️ 注意事项:</strong>
                <ul>
                    <li>确保无人机设备ID正确，且对应的视频流正在推送</li>
                    <li>建议在生产环境中使用HTTPS协议</li>
                    <li>某些浏览器可能需要用户交互才能自动播放视频</li>
                    <li>移动端建议添加 <code>playsinline</code> 属性以避免全屏播放</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        function updateEmbed() {
            const droneId = document.getElementById('droneIdInput').value;
            if (droneId) {
                const iframe = document.getElementById('videoEmbed');
                iframe.src = `http://localhost:8002/embed?droneId=${droneId}`;
            }
        }
        
        function refreshEmbed() {
            const iframe = document.getElementById('videoEmbed');
            iframe.src = iframe.src; // 刷新iframe
        }
        
        // 回车键更新
        document.getElementById('droneIdInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                updateEmbed();
            }
        });
    </script>
</body>
</html>